<template>
    <div class="Sli">
        <div v-for="(item,index) in fidelLis">
            <div class="titleTo">
                <span v-if="arr[index]" class="Sicon" @click="clickSwitch(index)">-</span>
                <span v-else class="Sicon" @click="clickSwitch(index)">+</span>
                <span>{{item.name}}</span>
            </div>
            <div class="tableBom" v-show="arr[index]" >
                <div v-for="element in item.table" >
                    <div v-if="element.show.includes(model['componentType'])||element.show.includes('all')" class="tableRow">
                        <span class="cell">{{element.title}}</span>
                        <span class="cell">
                            <el-input-number size="small" v-if="element.type==='number'&&model.width===undefined" v-model="model[element.value]" :min="0" :max="24"/>

                            <el-select v-if="element.type==='down' && element.choose" v-model="model[element.value]" collapse-tags
                                       collapse-tags-tooltip :multiple="element.multiple==='multiple'" class="m-2" placeholder="请选择" size="small">
                                <el-option
                                    v-for="itemTo in element.choose"
                                    :key="itemTo.value"
                                    :label="itemTo.label"
                                    :value="itemTo.value"
                                    />

                            </el-select>
                          <el-select v-else-if="element.type==='down' && ['down','list','automaticText'].includes(model['componentType']) &&!element.choose" v-model="model[element.value]" collapse-tags
                                       collapse-tags-tooltip :multiple="element.multiple==='multiple'" class="m-2" placeholder="请选择" size="small">
                              <el-option
                                                  v-for="itemTo in Components[tp[model['componentType']]]"
                                                  :key="itemTo.value"
                                                  @click="sxChange(itemTo,model,model['ComponentType'])"
                                                  :label="itemTo.ComponentName"
                                                  :value="itemTo.ComponentID"
                            />
                            </el-select>
                            <el-select v-if="element.type==='mapdown'" v-model="model[element.value]" collapse-tags
                                       collapse-tags-tooltip :multiple="element.multiple==='multiple'" class="m-2" placeholder="请选择" size="small">
                                <el-option
                                    v-for="itemTo in MT"
                                    :key="itemTo.fieldID"
                                    :label="itemTo.fieldDispName"
                                    :value="itemTo.fieldName"
                                    />

                            </el-select>
                            <el-input size="small" v-if="element.type==='number'&&(model.width===''||model.width)" v-model="model[element.width]"></el-input>
                            <el-input size="small" v-if="element.type==='text'" v-model="model[element.value]"></el-input>
                            <el-button size="small" style="width: 100%;" v-if="element.type==='Dialog'" @click="clickset(element,model['componentType'])">设置</el-button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <component :is="label" :values="configlist" :data="data"  :Fname="Fname" :model="model" :list="listData" :MT="MT" :TB="TB" :TBindex="TBindex" v-if="visible&&label" @shutDown="shutDown"></component>
</template>
<script setup>
    import {ref,onMounted,watch,shallowRef} from 'vue'
    import {getLkCombo} from "/@/api/linkoo/lkCombo/index.ts"
    import {getDataGridSource} from "/@/api/linkoo/datagrid/index.ts"
    import {getDS,getDSInfo} from "/@/api/linkoo/templates/specification.ts"
    const props = defineProps({
        fidelLis:{
            type:Array,
            required:true
        },
        model:{
            type:Object,
            required:true
        },
        listData:{
            type:Array,
            required:false
        },
      Components:{
            type:Array,
            required:false
        },
        MT:{
            type:Object,
            required:false
        },
        TB:{
            type:Array,
            required:false
        },
        TBindex:{
            type:Number
        },
        Fname:{
            type:Object
        }
    })
    let arr = ref([])
    let label = shallowRef(null)
    let visible = ref(false)
    let configlist=ref(null)
    let xzV = ref(null)
    let data = ref(null)
    let tp=ref({"automaticText":'2',"list":'3','down':'1'})
    onMounted(()=>{
         props.fidelLis.forEach((element,sun) => {
            arr.value.push(true)

        });
    })
    
    const clickSwitch = (index)=>{
        arr.value[index]=!arr.value[index]
    }
    const clickset = async(elm,tp)=>{
        if(tp==='list'){
            await getDSInfo(3,props.model['configID']).then(async(res)=>{
                data.value=res.data
            })
        }
        label.value=elm.component
        visible.value=true
      configlist.value=props.model['configList']
        xzV.value=elm.value
    }
    const shutDown=(value,item)=>{
        visible.value=value
        if(item){
            props.model[xzV.value]=item
        }
    }
    const sxChange=(value,element,type)=>{
        if(!value.ComponentID){
            return
        }
        if(type==="list"){
            element['items']={tid:value.ComponentType,id:value.ComponentID}
        }else if(type==="down"||type==="radio"){
            getLkCombo(value.ComponentID).then((res)=>{
                if(res.code===0){
                    element['items']=res.data.info.items
                }
            })
        }
    }
    // const DS=async(type)=>{
    //     const res=await getDS(0)
    //     if(res.code===0){
    //         return Tidy(res.data.list,type)
    //     }
    // }
    // const Tidy=async(val,type)=>{
    //     let arr = []
    //     val.forEach(element => {
    //         if(element.ComponentType==type){//下拉
    //             arr.push(element)
    //         }
    //     });
    //     return await arr
    // }
</script>
<style lang="scss" scoped>
    .titleTo{
        display: flex;
        cursor: pointer;
        margin-bottom: 5px;
        .Sicon{
            width: 20px;
            height: 20px;
            font-size:12px;
            text-align: center;
            border: 1px solid #a6a6a666;
        }
        .Sicon:nth-child(n+1){
            margin-right: 10px;
        }
        
    }
    .tableBom{
        padding-left: 31px;
        margin-bottom: 5px;
        .tableRow{
            display: flex;
            .cell{
                flex:1;
                border: 1px solid #a6a6a644;
                padding: 3px;
            }
        }
    }
</style>